<template>
  <div>
  <van-nav-bar
    title="购物车"
    left-text="返回"
    :right-text="exitText"
    left-arrow
    @click-right="onClickRight"
    />
    <van-checkbox-group v-model="result" ref="checkboxGroup">
        <van-checkbox class="checkbox" v-for="item in goods" :key="item.id" :name="item">
            <div class="good-item">
                <img :src="item.img" alt="">
                <div class="detail">
                    <p>{{item.cont}}</p>
                    <div class="price-num" @click.stop="fun">
                        <span class="box">￥<em>{{item.price}}</em>.00</span>
                        <van-stepper v-model="item.num" min="1"/>
                    </div>
                </div>
            </div>
        </van-checkbox>
    </van-checkbox-group>

    <van-submit-bar :price="sum*100" :button-text="submitText" @submit="onSubmit">
        <van-checkbox v-model="checked" @click="toggleAll">全选</van-checkbox>
    </van-submit-bar>
 </div>
</template>

<script>
import { ref, computed, watchEffect, watch } from 'vue';
import { useStore } from 'vuex'
export default {
  setup() {
    const store = useStore()
    const result = ref([]);
    const checkboxGroup = ref(null);
    const checked = ref(false)
    const exitText = ref('编辑')
    const submitText = ref('结算')
    const toggleAll = () => {
      checkboxGroup.value.toggleAll(checked.value);
    }

    const goods = computed(() => {
        // console.log(1);
        return store.state.goods
    })

    // 监听result数据的变化
    watchEffect(() => {
        if(result.value.length === goods.value.length && result.value.length > 0) {           
            checked.value = true
        } else {
            checked.value = false
        }
    })

    let sum = computed(() => {
        let price = 0
        result.value.forEach(item => {
            price+= item.price*item.num
        })
        return price
    })

    // 编辑按钮点击逻辑
    function onClickRight() {
        exitText.value = exitText.value == '编辑' ? '完成' : '编辑'
        submitText.value = exitText.value == '编辑' ? '结算' : '删除'
    }

    function onSubmit() {
        if(submitText.value == '删除') {
            store.commit('del', result.value)
            result.value = []
            checked.value = false
        }
    }

    watch(() => goods, (to) => {
        // console.log(to);
        store.commit('changeGoods', to.value)
    }, {
        deep: true
    })
    return {
        result,
        toggleAll,
        checkboxGroup,
        goods,
        onSubmit,
        checked,
        sum,
        exitText,
        submitText,
        fun() {
            return false
        },
        onClickRight
    };
  },
};
</script>

<style scoped lang="scss">
.checkbox {
    background-color: #fff;
    margin-top: 20px;
    padding: 15px;
}
.good-item {
    display: flex;
    width: 100%;
    img {
        width: 100px;
        height: 100px;
        display: block;
    }
    .detail {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 15px;
        width: 240px;
        .price-num {
            display: flex;
            width: 100%;
            justify-content: space-between;
            .box {
                color: #d00000;
                font-size: 14px;
                em {
                    font-size: 20px;
                    font-style: normal;
                }
            }
        }
    }
}
</style>